<template>
  <div class="box">
    <div class="user">
      <van-image
        round
        width="64px"
        height="64px"
        fit="cover"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <div class="name-info">
        <span>111</span>
        <br />
        <van-tag plain type="primary">标签</van-tag>
      </div>
    </div>
    <van-row class="row">
      <van-col span="8">
        <van-icon name="envelop-o" color="#fe7d7d" badge="9" />
        <br />
        我的信息</van-col
      >
      <van-col span="8">
        <van-icon name="friends-o" color="#1989fa" />
        <br />
        我的好友</van-col
      >
      <van-col span="8">
        <van-icon name="star-o" color="#58a07d" />
        <br />
        我的收藏</van-col
      >
    </van-row>
    <div class="cell">
      <van-cell-group>
        <van-cell icon="fire-o" title="演出" />
        <van-cell icon="cart-circle-o" title="商城" />
        <van-cell icon="location-o" title="附近的人" />
        <van-cell icon="gem-o" title="我的会员" />
        <van-cell icon="description" title="我的订单" />
        <van-cell icon="play-circle-o" title="定时停止播放" />
        <van-cell icon="scan" title="扫一扫" />
        <van-cell icon="music-o" title="音乐闹钟" />
        <van-cell icon="setting-o" title="设置" />
        <van-cell icon="close" title="退出" @click="delClick" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'user',
  methods: {
    delClick () {
      this.$router.push({ path: '/login' })
    }
  }
}
</script>

<style scoped>
.user {
  height: 100px;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  padding-left: 10px;
}
.name-info {
  font-size: 18px;
  margin-left: 10px;
}
.row {
  display: flex;
  align-items: center;
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}
.cell {
  margin-top: 20px;
}
</style>
